import React  from 'react'
import Header from './component/Header'
import List from './component/List'
import Footer from './component/Footer'
import { useState} from 'react'
import './App.css'
export default function App() {
  // const [state] = useState(0)
  const [todos,setTodos] = useState([
    { id: '001', name:'吃饭', done: true},
    { id: '002', name:'睡觉', done: true},
    { id: '003', name:'打代码', done: false},
    { id: '004', name:'逛街', done: true},
  ]);

  //更新一个todo对象
  var updateTodo = (id, done)=>{
    const newTodos =  todos.map((item) => {
      if(item.id === id) {
        item.done = !!done;
      }
      return item;
    })
    setTodos(newTodos)
  }

  //接一个参数，添加一个todo
  var addTodo = (todoObj)=>{
     setTodos([...todos, todoObj])
  }

  //根据id删除一个todo
  var deleteTodo = (id) => {
     const newTodos = todos.filter((item) =>  {
        return item.id !== id
     })
     setTodos(newTodos)
  }

  //根据子组件传回的状态全选｜｜全不选
  var checkAllTodo = (done) => {
      const newTodos = todos.map((item) => {
          return {...item,done:done}
      })
      setTodos(newTodos)
  }

  //hanleClearAllDone
  var clearAllDone = () => {
      const newTodos = todos.filter((item) => {
          return !item.done
      })
      setTodos(newTodos)
  }
  return (
    <div className="todo-container">
    <div className="todo-wrap">
      <Header addTodo = {addTodo} />
      <List updateTodo={updateTodo} deleteTodo = {deleteTodo} todos = {todos}/>
      <Footer checkAllTodo={checkAllTodo} clearAllDone={clearAllDone} todos = {todos} />
    </div>
  </div>
  )
}
